<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Color Interpolator</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
    <script type="text/javascript" src="../../lib/d3.js"></script>
    <script type="text/javascript" src="../../../../../../../lib/jquery/jquery-3.4.1.min.js"></script>
</head>

<body>

    <div id="color" class="clear">
        <span>Linear Color Interpolation<br></span>
    </div>
    <div id="color-diverge" class="clear">
        <span>Poly-Linear Color Interpolation<br></span>
    </div>

    <script type="text/javascript">
        $(function main() {
           /*  var content = $("body")[0].innerHTML;
            var elePre = $("<pre/>", {
                id: "presentation"
            }).html(content);
            var eleDiv = $("<pre/>").text(elePre[0].outerHTML);
            console.log(eleDiv.html());
            debugger;
            $("body").append(elePre);
            debugger; */
            var max = 21,
                data = [];

            var colorScale = d3.scaleLinear() // <-A
                .domain([0, max])
                .range(["white", "#4169e1"]);

            var divergingScale = function (pivot) { // <-B
                return d3.scaleLinear()
                    .domain([0, pivot, max]) // <-C
                    .range(["white", "#4169e1", "white"])
            };

            for (var i = 0; i < max; ++i) data.push(i);

            function render(data, scale, selector) { // <-D
                var cells = d3.select(selector).selectAll("div.cell")
                    .data(data);

                cells.enter()
                    .append("div").merge(cells)
                    .classed("cell", true)
                    .style("display", "inline-block")
                    .style("background-color", function (d) {
                        return scale(d); // <-E
                    })
                    .text(function (d, i) {
                        return i;
                    });
            }
            render(data, colorScale, "#color");
            render(data, divergingScale(5), "#color-diverge");
        })
    </script>

    <div class="control-group clear">
        <button onclick="render(data, divergingScale(5), '#color-diverge')">Pivot at 5</button>
        <button onclick="render(data, divergingScale(10), '#color-diverge')">Pivot at 10</button>
        <button onclick="render(data, divergingScale(15), '#color-diverge')">Pivot at 15</button>
        <button onclick="render(data, divergingScale(20), '#color-diverge')">Pivot at 20</button>
    </div>
</body>

</html>